<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<title>帖子信息</title>
<link rel="icon" type="image/x-icon">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<body>
<!--样式资源-->
<div th:insert="base/style :: style"></div>
<!--样式资源-->

<!--nav导航-->
<div th:insert="base/nav :: nav"></div>
<!--nav导航-->
<!--hidden-->
<div th:insert="base/hidden :: hidden"></div>
<!--hidden-->
<div class="content">
    <div class="row">
            <div class="col-md-2 col-sm-2">
                <h4 style="color: #363636;font-size: 20px;font-style: italic;margin-left: 20px">&nbsp;&nbsp;&nbsp;个人栏目<small></small></h4>
                <div class="col-md-4">
                    <ul style="margin-top: 10px;margin-left: 30px">
                        <li><a style="text-decoration: none;color: #464646" onclick="skip_to(PUBLISH_INDEX,'')" class="btn"><i class="icon-edit" style="color: grey"></i>&nbsp;我要发帖</a></li>
                        <li th:if="${session.id} != null"><a style="text-decoration: none;color: #464646" onclick="skip_to(COLLECTION_INDEX,'')" class="btn"><i class="icon-star" style="color: grey"></i>&nbsp;收藏/关注</a></li>
                        <li th:if="${session.id} != null"><a style="text-decoration: none;color: #464646" onclick="skip_to(REPO_INDEX,'')" class="btn"><i class="icon-cloud" style="color: grey"></i>&nbsp;个人帖库</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-7" id="postindex">
                <h4 style="font-size: 20px;font-style: italic">&nbsp;&nbsp;&nbsp;帖子详情&nbsp;<small style="color: #00b4ef"><i class="icon-double-angle-right"></i></small></h4>
                <div class="col-md-12" style="margin-top: 2%">
                    <h3 v-text="title"></h3>
                    <p style="margin-top: 1%;font-size: 16px;"><span style="color: #4D5755">来自:</span><span v-text="nickname"></span>&nbsp;&nbsp;<span v-text="createtime"></span></p>
                    <!--<p style="text-indent:30px;margin-top: 2%">{{content}}</p>-->
                    <div v-html="content" style="margin-top: 1%;text-indent: 2em;"></div>
                    <div class="row" style="margin-top: 2%">
                        <div class="btn-group" role="group" aria-label="...">
                            <button type="button" class="btn btn-default" onclick="likes()" id="likesbutton"><i id="likesicon" class="icon-heart-empty" v-text="likes"></i>喜欢</button>
                            <button type="button" class="btn btn-default" title="展开评论" onclick="showCommentDiv()" id="showCommentDiv"><i class="icon-comments-alt" v-text="cnums"></i><i class="icon-angle-down" id="commenticon"></i></button>
                            <button type="button" class="btn btn-default" onclick="share()"><i class="icon-share">分享</i></button>
                            <button type="button" class="btn btn-default"  id="collectionbutton" onclick="collectionsP()"><i id=collectionicon class="icon-star-empty">收藏</i></button>
                            <button type="button" class="btn btn-default"  id="reportbutton" onclick="report()"><i id="reporticon" class="icon-warning-sign"  style="color: #D1CDCD"></i>举报</button>
                            <a type="button" v-if="index!= 0"class="btn btn-default"  :href="'/home/post/'+ids[index-1]"  ><i class="icon-double-angle-left">上一帖</i></a>
                            <a type="button" v-if="index!=ids.length-1" class="btn btn-default" :href="'/home/post/'+ids[index+1]" ><i class="icon-double-angle-right">下一帖</i></a>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 2%;display: none" id="comments">

                        <li v-for="item in comment" style="margin-top: 2px">
                            <p v-if="item.bplz == nickname"><span  class="badge"><a href="#" style="text-decoration: none;color: white" onclick="">{{item.plz}}</a></span><span style="font-size: 8px">:<b>{{item.content}}</b></span><span>&nbsp;&nbsp;<span style="font-size: 8px">{{item.createtime.substring(0,11)}}</span><button  class="btn btn-default btn-xs"  :id="item.commentator" :title="item.plz"  style="text-decoration: none;font-size: 6px" onclick="show(this.id,this.title)"  >回复</button></span></p>
                            <p v-else><span  class="badge"><a href="#" style="text-decoration: none;color: white" onclick="">{{item.plz}}</a></span><span>回复</span><span class="badge">{{item.bplz}}</span><span style="font-size: 8px">:<b>{{item.content}}</b></span>&nbsp;&nbsp;<span style="font-size: 8px">{{item.createtime.substring(0,11)}}<button class="btn btn-default btn-xs"  :id="item.commentator" :title="item.plz"   style="text-decoration: none;font-size: 6px" onclick="show(this.id,this.title)" >回复</button></span></p>
                        </li>
                        <div id="inputarea" style="display: none">
                            <input type="hidden" id="puid" v-model="uid">
                            <input type="text" id="inputa" style="margin-top: 2%" class="form-control" placeholder=""><button type="button" style="margin-top: 2%" class="btn btn-default btn-xs"  onclick="reply()">确认</button><button type="button" style="margin-top: 2%;margin-left: 2px" class="btn btn-default btn-xs" v-on:click="hidInputarea">关闭</button><br>
                        </div>
                        <button type="button" style="margin-top: 2%" :id="uid" class="btn btn-default btn-xs" :title="nickname" onclick="showp(this.id,this.title)">我要评论<i class="icon-edit"></i></button>
                    </div>
                </div>
            </div>
    </div>
    <div class="row" style="margin-top: 55px"></div>
</div>
<!--页脚-->
<div th:insert="base/footer :: footer"></div>
<!--页脚-->

<script src="https://cdn.bootcss.com/clipboard.js/2.0.0/clipboard.js"></script>
<script>
    new ClipboardJS('.btn');
    var postIndex = new Vue({
        el:"#postindex",
        data:{
            id:"",
            index:"",
            ids:"",
            uid:"",
            title:"",
            nickname:"",
            createtime:"",
            content:"",
            likes:"",
            cnums:"",
            comment:"",
            com_content:"",
            copyData: window.location.href
        },
        methods:{
            getPostInfo:function () {
                layui.use('layer',function () {
                    var index = layer.load(2);
                    let obj = get_post_info(PID);
                    postIndex.id = obj.data.id;
                    postIndex.uid = obj.data.uid;
                    postIndex.title = obj.data.title;
                    postIndex.nickname = obj.data.nickname;
                    postIndex.createtime = obj.data.createtime.substring(0,19);
                    postIndex.content = obj.data.content;
                    postIndex.likes = obj.data.likes;
                    postIndex.cnums = obj.data.cnums+"条评论";
                    layer.close(index);
                });
            },
            getPostComment:function () {
                layui.use('layer',function () {
                    var index = layer.load(2);
                    let obj = get_comment_info(PID);
                    postIndex.comment = obj.data;
                    layer.close(index);
                });
            },
            getPostOkID:function(){
                layui.use('layer',function () {
                    var index = layer.load(2);
                    let obj = get_post_status_ok_ids();
                    postIndex.ids = obj.data;
                    postIndex.index = $.inArray(parseInt(postIndex.id),postIndex.ids);
                    layer.close(index);
                });
            },
            hidInputarea:function () {
                $("#inputarea").attr("style","display:none");

            },

        }
    });

    var becommented = "";
    var content = "";
    var type = ""

    function showCommentDiv() {
        //commenticon
        $("#comments").attr("style","display:inline");
        $("#showCommentDiv").attr("onclick","hidCommentDiv()");
        $("#commenticon").removeClass("icon-angle-down");
        $("#commenticon").toggleClass("icon-angle-up");
    }

    function hidCommentDiv() {
        $("#comments").attr("style","display:none");
        $("#showCommentDiv").attr("onclick","showCommentDiv()");
        $("#commenticon").removeClass("icon-angle-up");
        $("#commenticon").toggleClass("icon-angle-down");
    }

    //回复框展示
    function show(id,title){
        $("#inputarea").attr("style","display:inline");
        $("#inputa").attr("placeholder","回复给"+title);
        type = "回复";
        becommented= id;
    }
    //评论框提示
    function showp(id,title){
        $("#inputarea").attr("style","display:inline");
        $("#inputa").attr("placeholder","评论给"+title);
        type = "评论";
        becommented= id;
    }

    //回复 or 评论
    function reply() {
        layui.use('layer',function () {
            content = $("#inputa").val();
            if(isNaN(UID)) {
                layer.msg("请先登录!");
                setTimeout('showLogin();', 2000)
            }else if(!forbiddenStr(content)){
                layer.msg("内容包含论坛限制敏感字符!!");
            }else {
                var index = layer.load(2);
                let obj = comment_add('?pid='+PID+"&content="+content+"&commentator="+UID+"&becommented="+becommented+"&type="+type);
                update_score('?score='+parseInt(get_config('评论增分').data.configparameter)+'&id='+UID);
                if(obj.data !== ""){
                    layer.close(index);
                    layer.msg("成功!");
                    postIndex.getPostInfo();
                    postIndex.getPostComment();
                }else {
                    layer.close(index);
                    layer.msg("操作异常!");
                }
            }

        });

    }
    //喜欢
    function likes(){
        layui.use('layer',function () {
            var index = layer.load(2);
            if(isNaN(UID)) {
                layer.close(index);
                layer.msg("请先登录!");
                setTimeout(' showLogin();', 2000)
            }else{
                let obj = likes_add('?pid='+PID+"&uid="+UID);
                if(obj.data !== 0){
                    layer.close(index);
                    $("#likesicon").removeClass("icon-heart-empty");
                    $("#likesicon").toggleClass("icon-heart");
                    postIndex.getPostInfo();
                    $("#likesbutton").attr("onclick","cancelLikes()");
                    layer.msg("喜欢+1");

                }else {
                    layer.close(index);
                    layer.msg("操作失败!")
                }
            }
        })
    }

    //取消喜欢
    function cancelLikes(){
        layui.use('layer',function () {
            var index = layer.load(2);
            if(isNaN(UID)) {
                layer.close(index);
                layer.msg("请先登录!");
                setTimeout(' showLogin();', 2000)
            }else{
                let obj = del_likes('?pid='+PID+"&uid="+UID);
                if(obj.data !== 0){
                    layer.close(index);
                    $("#likesicon").removeClass("icon-heart");
                    $("#likesicon").toggleClass("icon-heart-empty");
                    $("#likesbutton").attr("onclick","likes()");
                    layer.msg("喜欢-1");
                    postIndex.getPostInfo();
                }else {
                    layer.close(index);
                    layer.msg('操作失败!');
                }
            }


        })
    }

    //收藏
    function collectionsP(){
        layui.use('layer',function () {
            var index = layer.load(2);
            if(isNaN(UID)) {
                layer.close(index);
                layer.msg("请先登录!");
                setTimeout(' showLogin();', 2000)
            }else{
                let obj = collection_post('?uid='+UID+"&opid="+PID);
                if(obj.data !== 0){
                    layer.close(index);
                    $("#collectionicon").removeClass("icon-star-empty");
                    $("#collectionicon").toggleClass("icon-star");
                    $("#collectionbutton").attr("onclick","cancelCollectionsP()");
                    layer.msg("收藏+1");
                }else {
                    layer.close(index);
                    layer.msg("操作失败!")
                }
            }

        })
    }
    //分享
    function share(){
        layui.use('layer',function () {
            let obj = get_post_share_url('?url='+test);
            layer.alert('<input id="foo" type="text" class="form-control" value="'+obj.data+'"><button class="btn btn-primary btn-xs" style="margin-left: 35%;" data-clipboard-target="#foo">复制到剪切板</button>');

        })
    }
    
    //举报
    function report() {
        layui.use('layer',function () {
            var index = layer.load(2);
            if(isNaN(UID)) {
                layer.close(index);
                layer.msg("请先登录!");
                setTimeout(' showLogin();', 2000)
            }else{
                var html = '<form class="form-inline">\n' +
                    '                                <label for="forum" style="color: black"><b>理由</b></label>\n' +
                    '                                <select style="border-radius: 5px;width: 100%" id="ly" class="btn btn-default" required>\n' +
                    '                                    <option class="btn btn-default" value="">请选择</option><option class="btn btn-default" value="垃圾广告">垃圾广告</option><option class="btn btn-default" value="有害信息">有害信息</option><option class="btn btn-default" value="涉嫌侵权">涉嫌侵权</option><option class="btn btn-default" value="不友善行为">不友善行为</option><option class="btn btn-default" value="其它">其它</option>\n' +
                    '                                </select><div style="margin-top: 5px"></div><label for="title" style="color: black"><b>详情</b></label>\n' +
                    '                                <textarea class="form-control" id="info" placeholder="举报详情" style="width: 100%"></textarea></form>';

                layer.open({
                    title: '请输入举报信息'
                    , area: '500px'
                    ,content: html
                    ,btn: ['提交', '关闭']
                    ,yes: function(index, layero){
                        //按钮【按钮一】的回调
                        var content = $("#ly").val() + "," + $("#info").val();
                        if(!forbiddenStr(content)){
                            layer.msg("内容包含论坛限制敏感字符!!");
                        }else{
                            let obj = report_post('?uid='+UID+'&pid='+PID+'&content='+content);
                            if(obj.data !== 0){
                                layer.close(index);
                                $("#reporticon").attr("style","color:black");
                                $("#reportbutton").attr("onclick","");
                                layer.msg("举报成功!");
                            }else {
                                layer.close(index);
                                layer.msg("操作失败!");
                            }
                        }
                    }
                    ,btn2: function(index, layero){
                        //按钮【按钮二】的回调
                        layer.close(index)
                    }
                });
            }
        })
    }

    //取消收藏
    function cancelCollectionsP(){
        layui.use('layer',function () {
            var index = layer.load(2);
            if(isNaN(UID)) {
                layer.close(index);
                layer.msg("请先登录!");
                setTimeout(' showLogin();', 2000)
            }else{
                let obj = del_collection_post('?uid='+UID+"&opid="+PID);
                if(obj.data !== 0){
                    layer.close(index);
                    $("#collectionicon").removeClass("icon-star");
                    $("#collectionicon").toggleClass("icon-star-empty");
                    $("#collectionbutton").attr("onclick","collectionsP()");
                    layer.msg("收藏-1");
                }else {
                    layer.close(index);
                    layer.msg("操作失败!");
                }
            }

        })
    }


    //判断是否点赞
    function isDoLikes() {
        let obj = get_post_likes_uids(PID);
        if($.inArray(parseInt(UID),obj.data) !== -1){
            $("#likesicon").removeClass("icon-heart-empty");
            $("#likesicon").toggleClass("icon-heart");
            $("#likesbutton").attr("onclick", "cancelLikes()");
        }
    }

    //判断是否收藏
    function isCollection() {
        let obj = get_post_collection_uids(PID);
        if($.inArray(parseInt(UID),obj.data) !== -1){
            $("#collectionicon").removeClass("icon-star-empty");
            $("#collectionicon").toggleClass("icon-star");
            $("#collectionbutton").attr("onclick", "cancelCollectionsP()");
        }
    }

    //判断该用户是否举报了
    function isReport() {
        let obj = is_reported_post(PID);
        if($.inArray(parseInt(UID),obj.data) !== -1){
            $("#reporticon").attr("style","color:black");
            $("#reportbutton").attr("onclick", "readlyReport()");
        }

    }

    function readlyReport() {
        layui.use('layer',function () {
            layer.msg("你已经举报过该帖子啦！")
        })
    }
    var test = window.location.href;
    isDoLikes();
    isCollection();
    isReport();
    postIndex.getPostInfo();
    postIndex.getPostComment();
    postIndex.getPostOkID();
</script>